<template>
    <div>
		<top title="系统通知"></top>
		<ul class="list" v-if="formData.length>0">
			<van-list
				v-model="loading"
				:finished="finished"
				:finished-text="finishedText"
				@load="listEnd">
				<li v-for="item in formData" :key="item.id">
					<div class="title">
						<h3>{{item.title}}</h3>
						<span>{{item.createDate}}</span>
					</div>
					<p class="text">{{item.msgContent}}</p>
				</li>
			</van-list>
		</ul>
		<none v-else msg="暂无通知"></none>
    </div>
</template>
<script>
import none from "@/components/performance/msgCenter/none.vue"; 
import top from '@/components/title_bar/index.vue'
import {getuserUid} from '@/utils/auth.js'
export default {
	components:{
		top,
		none
	},
    data(){
		return{
			formData:[],
			userId:"",
			
			//上拉加载
			pageCurrent:1, //当前页
			pageSum:0, //数据库总共有多少页
			finishedText:"",  //没有更多了
			loading:false, //true加载中
			finished:false,  //true加载已完成（此时底部会出现“没有更多了”）
		}
	},
	methods:{
		list:function(){
			HTTP('notice_list',{
				pageNum:this.pageCurrent,
				pageSize:25,
				userUid:this.userId
			})
			.then(res=>{
				if(res.code == 200){
					this.loading = false;
					if(this.pageCurrent == 1){
						this.formData = res.data.list;
					}
					else{
						if(res.data.list.length>0){
							this.loading = false;
							res.data.list.map(o=>{
								this.formData.push(o);
							})
						}
						else{
							this.finished = true;
							this.finishedText = '没有更多了';
						}
					}
				}
				else{
					this.$toast(res.msg);
				}
			})
		},
		//拉到底部的时候
		listEnd:function(){
			console.log('到底了');
			this.pageCurrent++;
			setTimeout(() => {
				this.list();
			}, 500);
		}
	},
	mounted:function(){
		this.list();
	},
	created:function(){
		this.userId = getuserUid();
	}
};
</script>
<style lang="scss" scoped>
	.list{
		li{
			margin: 0.3rem;
			padding: 0.3rem;
			background-color: #fff;
			box-shadow: $box-shadow-light;
			border-radius: 4px;
			.title{
				display: flex;
				align-items: center;
				justify-content: space-between;
				h3{
					
					font-weight: normal;
					font-size: $fz-4;
				}
				span{
					color: #888;
				}
			}
			.text{
				padding-top: 5px;
				font-size: $fz-5;
				color: #666;
			}
		}
	}
</style>
